{% set value = (value is null ? field.default : value) %}
{% set siblings = data.parent.children.visible %}

<div class="form-field grid pure-g">
    <div class="form-label block size-1-3 pure-u-1-3">
        <label>
            {% if field.help %}
            <span class="tooltip" data-asTooltip-position="w" title="{{ field.help|e|tu }}">{{ field.label|tu }}</span>
            {% else %}
            {{ field.label|tu }}
            {% endif %}
            {{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }}
        </label>
    </div>
    <div class="form-data block size-2-3 pure-u-2-3">
        <div class="form-order-wrapper {{ field.size }}">
            {% set canReorder = not data.parent.header.content.items and data.visible %}
            <input
                type="hidden"
                data-order
                {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
                name="{{ (scope ~ field.name)|fieldName }}"
                value="{{ canReorder ? value : '' }}" />
            {% if data.parent.header.content.items %}
                <span class="note">{{ "PLUGIN_ADMIN.ORDERING_DISABLED_BECAUSE_PARENT_SETTING_ORDER"|tu }}</span>
            {% elseif not data.visible %}
                <span class="note">{{ "PLUGIN_ADMIN.ORDERING_DISABLED_BECAUSE_PAGE_NOT_VISIBLE"|tu }}</span>
            {% endif %}

            {% if siblings|length < 200 %}
				<ul id="ordering" class="{{ field.classes }}">
			    {% for page in siblings %}
					<li class="{% if page.order  == value and canReorder %}drag-handle{% else %}ignore{% endif %}" data-id="{{ page.slug }}">{{ page.title|e }}</li>
                {% endfor %}
				</ul>
			{% else %}
                <span class="note">{{ "PLUGIN_ADMIN.ORDERING_DISABLED_BECAUSE_TOO_MANY_SIBLINGS"|tu }}</span>
			{% endif %}
        </div>
    </div>
</div>
